<template>
    <g class="editor-element active" 
        :id="`item_${attr.idx}`" 
        @click="itemClick"
        @mousedown.left.stop
        @click.stop>   
        <line :x1="x" :y1="y" :x2="x1" :y2="y1" 
            :style="`stroke:${attr.lock?'#a19f9f':'#ff000059'}; stroke-width:${attr.height+4};`"
            v-if="attr.selected"         
            @mousedown.left.stop></line>
        <line :x1="x" :y1="y" :x2="x1" :y2="y1" 
            :style="`stroke:${attr.borderColor}; stroke-width:${attr.height+2};${attr.selected?'cursor:move;':''}`" 
            @mousedown.left="dragDown" @mousedown.left.stop></line>   
        <line :x1="x" :y1="y" :x2="x1" :y2="y1" 
            :style="`stroke: rgb(256, 256, 256); stroke-width:${attr.height};${attr.selected?'cursor:move;':''}`" 
            @mousedown.left="dragDown" 
            @mousedown.left.stop></line>       
        <line :x1="x" :y1="y" :x2="x1" :y2="y1" class="flow-line"                
            :style="`stroke:${attr.color};stroke-width:${attr.height};${attr.state==1?'animation:an_dash 0.3s infinite;':''}${attr.selected?'cursor:move;':''}`" 
            @mousedown.left="dragDown"
            @mousedown.left.stop></line>
        <g :class="`${attr.lock?'checked-rect-lock':'checked-rect'}`" v-if="attr.checked">
            <rect @mousedown.left.stop @mousedown.left="(event)=>{ resizeMouseDown('start',event); }"  :x="x-3" :y="y-3" width="6" height="6"></rect>
            <rect @mousedown.left.stop @mousedown.left="(event)=>{ resizeMouseDown('end',event); }"  :x="x1-3" :y="y1-3" width="6" height="6"></rect>            
        </g>
    </g>
</template>
<script>
export default {
    name:'flowLineItem',
    data(){
        return{
           isResize:false,
           resizeXY:null,
           resizeType:'',
           startXY:null,
           endXY:null,
        }
    },
    props:{       
        attr:{type:Object,default:{}}
    },
    watch:{        
        attr:{
            handler(n, o) {
                if(n){
                    this.startXY={x:n.x,y:n.y};
                    this.endXY={x:n.x1,y:n.y1};
                }
            },
            immediate: true,
            deep: true
        }
    },    
    computed:{
        x:function(){
            return this.startXY?this.startXY.x:this.attr.x;
        },
        y:function(){
            return this.startXY?this.startXY.y:this.attr.y;
        },
        x1:function(){
            return this.endXY?this.endXY.x:this.attr.x1;
        },
        y1:function(){
            return this.endXY?this.endXY.y:this.attr.y1;
        },
        border:function(){
            return `${this.x},${this.y-this.attr.height/2} ${this.x1},${this.y1-this.attr.height/2} ${this.x1},${this.y1+this.attr.height/2} ${this.x},${this.y+this.attr.height/2}`;
        }
    },
    mounted(){
        var that=this;
        window.addEventListener("mouseup", (event)=>{            
            if(that.isResize){ 
                //console.log('mouseup isResize',that);
                that.resizeMouseUp(event);                
            }
        });

        window.addEventListener("mousemove", (event)=>{            
            if(that.isResize){ 
                var offset={x:event.clientX - that.resizeXY.x,y:event.clientY - that.resizeXY.y};
                var xy={x:0,y:0};
                if(that.resizeType == 'start'){  
                    xy= {x:that.x+offset.x,y:that.y+offset.y}
                }else{
                    xy={x:that.x1+offset.x,y:that.y1+offset.y};
                }

                if(xy.x<0){
                    xy.x=0;
                }else if(xy.x>that.attr.pageSize.width){
                    xy.x=that.attr.pageSize.width;
                }
                if(xy.y<0){
                    xy.y=0;
                }else if(xy.y>that.attr.pageSize.height){
                    xy.y=that.attr.pageSize.height;
                }      
                if(that.resizeType == 'start'){        
                    that.startXY=xy;
                }else{
                    that.endXY=xy;
                }
                that.resizeXY={x:event.clientX,y:event.clientY};
            }
        });
    },
    methods:{
        itemClick:function(event){                   
            if(event.ctrlKey && this.attr.selected) {
                this.attr.onUnChecked(this.attr,event)();
            }else{
                this.attr.onChecked(this.attr,event)();
            }
        },
        resizeMouseDown:function(resizeType,event){
            if(this.attr.lock) return;
            if(this.attr.selected){
                this.isResize=true;
                this.resizeType=resizeType;
                this.resizeXY={x:event.clientX,y:event.clientY};
            }
            event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;            
        },
        resizeMouseUp:function(event){
            if(this.isResize){ 
                this.isResize=false;
                // console.log('this.attr.onUpdateAttr')
                this.attr.onUpdateAttr(this.attr,"x",this.x)();                
                this.attr.onUpdateAttr(this.attr,"y",this.y)();                
                this.attr.onUpdateAttr(this.attr,"x1",this.x1)();                
                this.attr.onUpdateAttr(this.attr,"y1",this.y1)();                
            }
        },
        resizeDown:function(resizeType){
            if(this.attr.lock) return;
            this.attr.onResizeDown(this.attr.idx,resizeType)();
        },
        dragDown:function(event){
            if(this.attr.lock) return;
            if(this.attr.selected){
                this.attr.onDragDown(this.attr.idx,event)();
            }        
        }
    }
}
</script>
<style>
@keyframes an_dash {
    from { stroke-dashoffset: 0;}
    to { stroke-dashoffset: -19;}
}
@-webkit-keyframes an_dash /*Safari and Chrome*/
{
    from {stroke-dashoffset:0;}
    to {stroke-dashoffset:-19;}
}
</style>
<style scoped lang="scss">
.item-shadow{
    border:1px #ff000059 solid;
    word-break: break-all; 
    overflow-wrap: break-word; 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.1);
    cursor: move;
}

.checked-rect rect {
    fill: #ff0000;
    opacity: 1;
    cursor:pointer;
}

.checked-rect-lock rect {
    fill: #a19f9f;
    opacity: 1;
    cursor:pointer;
}

.flow-line{
    stroke-dasharray:10;
    stroke-dashoffset:0;
}
</style>